<!DOCTYPE html>
<html ng-app="hfrApp">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Dashboard</title>
	<meta name="Description" content="Hatforrent - Collect online data, automatically update to your website" />
	<meta property="og:title" content="Hatforrent" />
	<meta property="og:description" content="Hatforrent - Collect online data, automatically update to your website" />
	<meta property="og:locale" content="en_US" />
	<meta property="og:url" content="beta.hatforrent.com" />
	<meta property="og:image" content="assets/images/ogp.jpg" />
	<meta property="og:image:width" content="250" />
	<meta property="og:image:height" content="250" />

	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/ico/apple-touch-icon-144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/ico/apple-touch-icon-114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/ico/apple-touch-icon-72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="assets/images/ico/apple-touch-icon-57-precomposed.png">

	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.10.4.custom.min.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
	<link rel="stylesheet" type="text/css" href="assets/css/themify-icons.css" />
</head>

<body data-spy="scroll" data-target="#hfr-navbar">
	<div id="master" ng-controller="HomeController">

        <!-- Header
        ================================================== -->
        <header>
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="hfr-navbar">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href><span><img src="assets/images/logo.png" width="240" /></span></a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right" ng-controller="SignInController">
							<li class="active"><a href="#hfr-welcome"><span class="ti-home"></span>&nbsp;&nbsp;{menu_home}</a></li>
							<li><a href="#hfr-purpose"><span class="ti-star"></span>&nbsp;&nbsp;{menu_purpose}</a></li>
							<li><a href="#hfr-whom"><span class="ti-settings"></span>&nbsp;&nbsp;{menu_whom}</a></li>
							<li><a href="#hfr-what"><span class="ti-layers-alt"></span>&nbsp;&nbsp;{menu_what}</a></li>
							<li><a href="#hfr-how"><span class="ti-panel"></span>&nbsp;&nbsp;{menu_how}</a></li>
							<!-- <li><a href class="login"><span class="ti-user"></span>&nbsp;&nbsp;{menu_login_with_google}</a></li> -->
							<li ng-hide="signedIn">
								<span id="googleSignIn">
						            <span id="signInButton">
						            </span>
						        </span>
							</li>
							<li ng-show="signedIn">
							{{username}}
							<a href ng-click="logout()">Logout</a>
							</li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
        </header>

        <!-- Content
        ================================================== -->
        <div id="content">           

        	<!-- Welcome -->
        	<section id="hfr-welcome">
        		<div class="container">
        			<h1>Hello & welcome to Hatforrent</h1>
        			<h2 class="slogan">Cras ac suscipit odio, vitae tincidunt mauris. Nunc at congue lacus. <br /> Praesent vel tincidunt elit</h2>
        			<a href class="hfr-btn">Join Us Now</a>
        		</div>
        	</section>

	        <!-- Purpose -->
	        <section id="hfr-purpose">
	        	<div class="container">
		        	<h2 class="hfr-sectionHeading">{purpose}</h2>
		        	<div class="hfr-sectionContent">
		        		<div class="row">
		        			<div class="col-md-4">
								<div>
									<span class="ti-layers-alt"></span>
									<h3 class="title">{purpose_manage}</h3>
			        				<p>{purpose_manage_desc}</p>
								</div>
		        			</div>
		        			<div class="col-md-4">
								<div>
									<span class="ti-loop"></span>
									<h3 class="title">{purpose_update}</h3>
			        				<p>{purpose_update_desc}</p>
								</div>
		        			</div>
		        			<div class="col-md-4">
								<div>
									<span class="ti-save-alt"></span>
									<h3 class="title">{purpose_collect}</h3>
			        				<p>{purpose_collect_desc}</p>
								</div>
		        			</div>
		        		</div>
		        	</div>
	        	</div>
	        </section>
			
        	<!-- Whom -->
            <section id="hfr-whom">
            	<div class="container">
		        	<div class="hfr-sectionContent">
		        		<div class="row">
		        			<div class="col-md-6">
		        				<div class="hfr-line">
		        					<div class="hfr-whomImage">
		        						<img src="http://themewinter.com/html/dart/images/feature-mock.png" />
		        					</div>
		        				</div>
		        			</div>
		        			<div class="col-md-6">
		        				<div class="hfr-solidCircle">		        					
		        					<div class="hfr-solidCircle_inner">
		        						<h2 class="hfr-sectionHeading">{whom}</h2>
		        						<div class="clearafter hfr-whomItem">
					        				<h3 class="title"><span class="ti-user"></span> {whom_web_master}</h3>
					        				<p>{whom_web_master_desc}</p>
		        						</div>
		        						<div class="clearafter hfr-whomItem">
					        				<h3 class="title"><span class="ti-lock"></span> {whom_developer}</h3>
					        				<p>{whom_developer_desc}</p>
		        						</div>
		        						<div class="clearafter hfr-whomItem">
					        				<h3 class="title"><span class="ti-layers-alt"></span> {whom_integration}</h3>
					        				<p>{whom_integration_desc}</p>
		        						</div>
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		        	</div>
	        	</div>
	        </section>

	        <!-- What -->
	        <section id="hfr-what">
	        	<div class="container">
		        	<h2 class="hfr-sectionHeading">{what}</h2>
		        	<div class="hfr-sectionContent">
		        		<div class="row">
		        			<div class="col-md-6">
		        				<div class="clearafter">
		        					<span class="ti-medall"></span>
			        				<div class="hfr-whatContent">
			        					<h3 class="title">{what_website}</h3>
			        					<p>{what_website_desc}</p>
			        				</div>
		        				</div>		        				
		        			</div>
		        			<div class="col-md-6">
		        				<div class="clearafter">
			        				<span class="ti-comments"></span>
			        				<div class="hfr-whatContent">
				        				<h3 class="title">{what_api}</h3>
				        				<p>{what_api_desc}</p>
			        				</div>
		        				</div>
		        			</div>
		        			<div class="col-md-6">
		        				<div class="clearafter">
			        				<span class="ti-comments"></span>
			        				<div class="hfr-whatContent">
				        				<h3 class="title">{what_service}</h3>
				        				<p>{what_service_desc}</p>
			        				</div>
		        				</div>
		        			</div>
		        			<div class="col-md-6">
		        				<div class="clearafter">
			        				<span class="ti-infinite"></span>
			        				<div class="hfr-whatContent">
				        				<h3 class="title">{what_plugins}</h3>
				        				<p>{what_plugins_desc}</p>
			        				</div>
		        				</div>
		        			</div>
		        			<div class="col-md-6">
		        				<div class="clearafter">
			        				<span class="ti-clipboard"></span>
			        				<div class="hfr-whatContent">
				        				<h3 class="title">{what_documentation}</h3>
				        				<p>{what_documentation_desc}</p>
			        				</div>
		        				</div>
		        			</div>
		        		</div>
		        	</div>
	        	</div>
	        </section>
			
	        <!-- How -->
	        <section id="hfr-how">
	        	<div class="container">
		        	<h2 class="hfr-sectionHeading">{how}</h2>
		        	<div class="hfr-sectionContent">
		        		<div class="hfr-howItem">
		        			<div class="row">
		        				<div class="col-md-6 content-center">
		        					<img src="http://www.mindmeister.com/images/x1/content/benefits/groups.png?dcf990" />
		        				</div>
		        				<div class="col-md-6">
		        					<h3 class="title">{how_register}</h3>
		        					<p>{how_register_desc}</p>
		        				</div>
		        			</div>
		        		</div>
		        		<div class="hfr-howItem">
		        			<div class="row">		        				
		        				<div class="col-md-6">
		        					<h3 class="title">{how_register_many_site}</h3>
		        					<p>{how_register_many_site_desc}</p>
		        				</div>
		        				<div class="col-md-6 content-center">
		        					<img src="http://www.mindmeister.com/images/x1/content/whymindmapping/structure.png?dcf990" />
		        				</div>
		        			</div>
		        		</div>
		        		<div class="hfr-howItem">
		        			<div class="row">
		        				<div class="col-md-6 content-center">
		        					<img src="http://www.mindmeister.com/images/x1/content/whymindmapping/productivity.png?dcf990" />
		        				</div>
		        				<div class="col-md-6">
		        					<h3 class="title">{how_spedify}</h3>
		        					<p>{how_spedify_desc}</p>
		        				</div>
		        			</div>
		        		</div>
		        	</div>
	        	</div>
	        </section>
        </div>
        
        <!-- Footer
        ================================================== -->
        <footer>
        	<div class="container">
				<h2 class="hfr-sectionHeading">{newsletter}</h2>
				<p>{newsletter_desc}</p>
				<form method="post" action="" id="hfr-subscribeForm">
					<div class="input-group input-group-lg">
						<input type="email" class="form-control" placeholder="{newsletter_placeholder}" required />
						<span class="input-group-btn">
							<button class="btn btn-success" type="submit">{newsletter_submit_button}</button>
						</span>
					</div>
				</form>
                <div id="hfr-share">
                    <a href class="ti-facebook"></a>
					<a href class="ti-google"></a>
					<a href class="ti-twitter-alt"></a>
					<a href class="ti-linkedin"></a>
                </div>
				<div id="hfr-copyright">
					<p>{copyright}</p>
                    <p><a href>{policy}</a> &nbsp; <a href>{terms}</a> &nbsp; <a href>{sitemap}</a> &nbsp; <a href>{rss}</a></p>
				</div>
            </div>
        </footer>
    </div>

    <!-- Javascript import
    ================================================== -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.4.1'></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- css3-mediaqueries.js for IE less than 9 -->
	<!--[if lt IE 9]>
	    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->
	<!-- <script>
		$(function() {
			//scrollspy
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')
			});
			
			//smooth scroll effect
			$('.navbar-nav > li > a').on('click',function (e) {
			    e.preventDefault();

			    var target = this.hash,
			    $target = $(target);

			    $('html, body').stop().animate({
			        'scrollTop': $target.offset().top
			    }, 500, 'swing', function () {
			        window.location.hash = target;
			    });
			});

		});
	</script> -->
	
	
	<!-- Angular JS -->
	<script src="assets/js/angular.js"></script>
	<script src="assets/js/angular-route.js"></script>
	<script src="https://apis.google.com/js/client:plusone.js"></script>
	
	<script src="hfr-app-home.js"></script>
	<script src="app/settings/hfr-settings.js"></script>
	<script src="app/services/authentication.js"></script>
	<script src="app/controllers/homeController.js"></script>

	<!-- begin olark code -->
	<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
	f[z]=function(){
	(a.s=a.s||[]).push(arguments)};var a=f[z]._={
	},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
	f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
	0:+new Date};a.P=function(u){
	a.p[u]=new Date-a.p[0]};function s(){
	a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
	hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
	return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
	b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
	b.contentWindow[g].open()}catch(w){
	c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
	var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
	b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
	loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
	/* custom configuration goes here (www.olark.com/documentation) */
	olark.identify('5122-773-10-8606');/*]]>*/</script><noscript><a href="https://www.olark.com/site/5122-773-10-8606/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
	<!-- end olark code -->
</body>
</html>